<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="other/myCssReset.css">
    <link rel="stylesheet" href="other/iconfont.css">
    <link rel="icon" href="http://localhost:8080/pic/apple-fill.png" type="image/x-icon">
    <title>Document</title>
    <style>
        /* 头部 */
        .head2 {
            opacity: 0.97;
            height: 44px;
            background-color: #323233 ;
        }

        .box_core2 {
            width: 1000px;
            height: 44px;
            margin: auto;
            box-sizing: border-box;
            text-align: center;
        }

        .box_core2 ul li {
            width: 9.5%;
            list-style: none;
            display: inline-block;
            text-align: center;
            line-height: 44px;
        }

        .box_core2 a {
            text-decoration: none;
            color: #D6D6D6;
            font-weight: 300;
            font-size: 15px;
            transition: color 0.3s;
        }

        .box_core2 a:hover {
            color: white;
        }

        .container{
            width: 100%;
            border-bottom: 1px solid #ddd;
            box-sizing: border-box;
        }
        .tit1{
            width: 980px;
            font-size: 40px;
            font-weight: 600;
            color:#1d1d1f ;
            padding: 34px 0 36px;   
            margin: auto;
     }
     .inputbox{
         width: 980px;
         margin: auto;
     }
     .inputbox>input{
         padding: 18px 16px 0;
         width: 408px;
         height: 56px;
         border-radius: 15px;
         border: 1px solid red;
         background-color: #fff2f4;
         font-size: 22px;
         display: block;
         margin-bottom: 25px;
         box-sizing: border-box;
     }
     .inputbox>input:focus{
        border: 5px solid #66B1FC;
     }
     .container>p{
         width: 980px;
         font-size: 15px;
         color:#1d1d1f ;
         margin: auto;
         margin-bottom: 25px;
     }
     .btn{
         width: 980px;
         margin: auto;

     }
     .btn>button{
         width: 408px;
         background-color: #0071e3;
         color: #fff;
         border-radius: 15px;
         font-size: 18px;
         border: 0;
         cursor: pointer;
        box-sizing: border-box;
         height: 56px;
         line-height: 56px;
     }
     
     .btn>button:hover{
         background-color: #0077ED;
     }
     .btn>button:active{
         background-color: #006EDB;
     }
     .btn>button:focus{
        border: 5px solid #66B1FC;
     }
     .a1{
         width: 980px;
         margin: auto;
         margin-top: 15px;
     }
     .a1 a{
         color: #0066cc;
         font-size: 25px;
         
     }
     .a1 a:hover{
         text-decoration: underline;
     }
     .pad{
         margin-bottom: 150px;
     }
     .container2{
         width: 100%;
     }
     .tit2{
         width: 980px;
         margin: auto;
         font-size: 17px;
         color: #1d1d1f;
         padding: 35px 0;
     }
     .tit2 a{
         color: #0066cc;
     }
     .tit2 a:hover{
         text-decoration: underline;
     }
     .container3{
         width: 100%;
         background-color: #F5F5F7;
     }
     .buttomtext1{
         width: 980px;
         margin: auto;
         padding: 20px 0;
         font-size: 12px;
         color: #86868B;
         border-bottom:1px solid #ddd;
     }
     .buttomtext2{
        width: 980px;
         margin: auto;
         padding: 20px 0;
         font-size: 12px;
         color: #86868B;
     }
     .buttomtext2 a{
        color: #0066cc;
     }
     .buttomtext2 a:hover{
         text-decoration: underline;
     }
    </style>
</head>
<body>
<!-- 头部 -->
<div class="head2">
    <div class="box_core2">
        <ul>
            <li><a href="index.html"><i class="iconfont icon-apple-fill"></i></a></li>
            <li><a href="store.html">商店</a></li>
            <li><a href="#">Mac</a></li>
            <li><a href="iPad.html">iPad</a></li>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">Watch</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">技术支持</a></li>
            <li><a href="#"><i class="bi bi-search"></i></a></li>
            <li><a href="login.html"><i class="bi bi-bag"></i></a></li>
        </ul>
    </div>
</div>

    <div class="container">
        <div class="tit1">
            <p>请登录。</p>
        </div>
        <div class="inputbox">
            <input type="text" name="" placeholder="App ID">
            <input type="text" name="" placeholder="App Password">
        </div>
        <p>你的 Apple ID 是你用来登录 iTunes、App Store 和 iCloud 的电子邮件地址或手机号码。</p>
        <div class="btn">
            <button>登录</button>
        </div>
        <div class="a1">
            <a href="#">忘了自己的 Apple ID 或密码？</a>
        </div>
        <div  class="a1 pad">
            <a href="#">没有 Apple ID？立即创建一个。</a>
        </div>
    </div>

    <div class="container2">
        <div class="tit2">
            <p>需要更多帮助？<span><a href="#">立即在线</a></span> 交流或致电 400-666-8800。</p>
        </div>
    </div>
    <div class="container3">
        <div class="buttomtext1">
            <p>Apple Store 在线商店采用符合业界标准的加密技术对您提交的信息进行保密。进一步了解我们的安全政策。</p>
        </div>
        <div class="buttomtext2">
            <p>更多选购方式：<a href="#">查找你附近的 Apple Store 零售店</a> 及更多<a href="#">门店</a>，或者致电 400-666-8800。</p>
        </div>
    </div>
</body>
</html>